﻿<template>
  <dv-border-box-11 title="本体关系" class="ontology_box">
    <el-switch
        style="display: block; float: right; color: #ffffff;"
        v-model="ontologyType"
        @change="handleSwitchType"
        active-color="#1a5cd7"
        inactive-color="#1a5cd7"
        active-text="属性"
        inactive-text="实例">
    </el-switch>
    <div id="ontology-container"></div>
    <dv-border-box-10 class="ontology_diag" v-show="ontologyVisible">
      <div id="ontology-diag-close" @click="ontologyVisible=false"><i class="el-icon-close"></i></div>
      <dv-scroll-board class="data_menu" :config="dataMenu" ref="scrollBoard" @click="handleClickScrollBoard"/>
    </dv-border-box-10>
  </dv-border-box-11>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'

axios.defaults.baseURL = '/api'

window.onresize = function () {
  let myChart = echarts.init(document.getElementById("ontology-container"))
  myChart.resize()
}

export default {
  data() {
    return {
      selectNodeData: {
        selectNodeId: "",
        selectNodeField: "",
        selectNodeCategory: 0
      },
      ontologyType: true,
      dataMenu: {
        header: ["", ""],
        data: ["", ""],
        waitTime: 5,
        headerBGC: "#0f1325",
        oddRowBGC: "#000555",
        evenRowBGC: "#000555",
        rowNum: 15,
        columnWidth: [200, 200],
        // align: ['center']
      },
      graph: {
        nodes: [],
        links: [],
        categories: []
      },
      ontologyVisible: false,
    }
  },
  methods: {
    getSelectNodeData() {
      return this.selectNodeData
    },
    handleClickScrollBoard(params) {
      this.selectNodeData.selectNodeField = params.row[0];
    },
    handleSwitchType() {
      this.initChart();
    },
    handleClickNode(params) {
      if (params.dataType === 'node') {
        // 如果点击的是节点，执行相应的逻辑
        this.selectNodeData.selectNodeId = params.data.id;
        this.selectNodeData.selectNodeCategory = params.data.category;
        this.ontologyVisible = true;
        if (this.ontologyVisible) {
          axios.get('/ontology/props', {
            params: {
              ontologyCategory: params.data.category,
            }
          }).then(
              response => {
                const res = JSON.parse(response.data);
                this.dataMenu.header = [res.header, ""];
                const res_data = []
                res.data.forEach(ontology => {
                  res_data.push([ontology.name, ontology.comment]);
                });
                this.dataMenu.data = res_data;
                this.dataMenu = {...this.dataMenu}
                this.$refs['scrollBoard'].updateRows(res_data, 0)
              },
              // 失败
              error => {
                console.log('请求失败了', error.message);
              });
        }
      }
    },
    initChart() {
      // 创建 ECharts 实例
      const chartDom = document.getElementById('ontology-container');
      const myChart = echarts.init(chartDom);
      myChart.showLoading();
      // 使用配置选项来设置图表
      var ontologyType = 'entity';
      if (!this.ontologyType) {
        ontologyType = 'instance';
      }
      axios.get('/ontology/query', {
        params: {
          type: ontologyType
        }
      }).then(
          response => {
            this.graph = JSON.parse(response.data);
            this.graph.nodes.forEach(function (node) {
              node.label = {
                show: node.symbolSize > 20
              };
            });
            var options = {
              title: {
                text: '本体关系',
                subtext: '默认布局',
                top: 'bottom',
                left: 'right'
              },
              legend: [{
                // selectedMode: 'single',
                data: this.graph.categories.map(function (a) {
                  return a.name;
                }),
                textStyle: {
                  color: '#ffffff'
                }
              }],
              darkMode: true,
              colorBy: "series",
              textStyle: {
                fontSize: 16
              },
              color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
              gradientColor: ['#f6efa6', '#d88273', '#d88273', '#bf444c'],
              animation: 'auto',
              animationEasing: 'cubicInOut',
              useUTC: false,
              selectedMode: true,
              selector: false,
              series: [
                {
                  name: '本体关系',
                  type: 'graph',
                  legendHoverLink: true,
                  layout: 'none',
                  data: this.graph.nodes,
                  links: this.graph.links,
                  categories: this.graph.categories,
                  roam: true,
                  zoom: 1,
                  nodeScaleRatio: 1,
                  label: {
                    position: 'right',
                    formatter: '{b}'
                  },
                  lineStyle: {
                    color: 'source',
                    curveness: 0.3
                  },
                  emphasis: {
                    disable: false,
                    focus: 'adjacency',
                    lineStyle: {
                      width: 20
                    },
                    scale: true,
                    label: {
                      show: true
                    },
                  }
                }
              ],
              tooltip: {
                show: true,
                showContent: true,
                triggerOn: 'mousemove | click',
                alwaysShowContent: false,
                displayMode: 'single',
                renderMode: 'auto',
                trigger: 'item', // 触发类型，'item' 表示数据项图形触发
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                formatter: function (params) {
                  // params 是包含当前数据信息的对象
                  // console.log(params)
                  var tdata = params.data || {};
                  if (params.dataType === 'edge') {
                    return tdata.source_l + ' > ' + tdata.target_l;
                  } else if (params.dataType === 'node') {
                    return tdata.name + ' : ' + tdata.value;
                  }
                }
              },
            }
            myChart.hideLoading();
            myChart.resize()
            myChart.setOption(options);
          },
          // 失败
          error => {
            console.log('请求失败了', error.message);
          });
      myChart.on('click', this.handleClickNode);
    }
  },
  mounted() {
    this.initChart();
    this.getSelectNodeData();
  }
};
</script>

<style scoped lang="scss">
.ontology_box {
  height: 850px;

  .ontology_diag {
    #ontology-diag-close {
      float: none;
      margin-right: 10px;
      margin-top: 10px;
      text-align: right;
      background: transparent;
      font-size: 20px;
      cursor: pointer;
    }

    .data_menu {
      margin-right: 20px;
      margin-left: 20px;
      margin-bottom: 20px;
      width: 360px;
      line-height: 35px;
    }

    position: absolute;
    right: 30px;
    top: 60px;
    width: 400px;
    height: auto;
  }
}

#ontology-container {
  position: relative;
  width: 1850px;
  left: 20px;
  height: 780px;
  padding: 0px;
  margin: 0px;
  top: 40px;
  overflow: hidden;
}
</style>